<template>
	<view class="mall-container" :style="'padding-top:' + setting.header.allHeight + 'px;'">
		<view class="mine-header" :style="'height:' + setting.header.height + 'px;' + 'padding-top:' + setting.header.top + 'px;padding-bottom:12upx;'">
			<view class="inner"><image src="http://static.kuaimayoupin.com/0119432821369318.png" mode="" class="mine-return-img" @click="toMine"></image></view>
		</view>
		<view class="mine-card">
			<view class="inner">
				<view class="mine-card-left">
					<view class="mine-head-box"><image :src="userInfo.avatar" mode="aspectFit" class="mine-head"></image></view>
				</view>
				<view class="mine-card-right">
					<view class="mine-info">
						<view class="mine-name">{{ userInfo.nick_name }}</view>
						<text class="mine-tag vip-tag">{{ vipInfo.vip_level == -1 ? '非会员' : vipInfo.vip }}</text>
					</view>
					<view style="color: #FFFFFF;">{{vipInfo.expire_date.slice(0,10)}}到期</view>
				</view>
			</view>
		</view>
		<view class="card-position">
			<view class="card-position-bg"></view>
			<view class="inner">
			<view class="white-card">
				<view class="vip-page-card">
					<view class="vip-page-card-top">
						<template v-for="(item, index) in vipList">
							<view class="set-meal" :key="index" @click="selectVip(index)">
								<view :class="['capital', { active: vipListIndex.index == index }]">
									<view class="set-meal-money"> 
										<image src="https://static.kuaimayoupin.com/000000_kt_xcx/vip/vip_note_bg.png" mode="widthFix"></image>
										<text>{{ item.desc }}</text>
									</view>
									<text class="set-meal-note">{{ item.note }}</text>
									<view class="capital-money">
										<text>¥</text>
										<view class="font32">{{ item.price }}</view>
									</view>
									<text class="set-meal-time">{{ item.duration }}</text>
								</view>
							</view>
						</template>
					</view>
				</view>
				<button type="default" class="Immediately-opened" @click="genOrder">立即开通解锁特权</button>
				<view class="vip-box">
					<view class="vip-title"><image src="http://static.kuaimayoupin.com/0988163167428259.png" mode=""></image></view>
					<view class="vip-ul">
						<view class="vip-li" v-for="(item, index) in vipIconList" :key="index">
							<image :src="item.image" mode="aspectFit"></image>
							<text>{{ item.label }}</text>
							<text v-if="item.tag" class="vip-li-tag">{{ item.tag }}</text>
						</view>
					</view>
				</view>
				<view class="vip-feature-box">
					<view class="vip-title">至尊特色</view>
					<view class="vip-feature">
						<view class="vip-zz-cell" v-for="info in zzIconList">
							<view class="image-view">
								<image :src="info.image" mode="widthFix"></image>
							</view>
							<view class="right-view">
								<view class="top-view">
									<view class="lable-1">{{info.label1}}</view>
									<view class="lable-2">{{info.label2}}</view>
								</view>
								<view class="lable-3">{{info.label3}}</view>
								<view class="cell-line"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getVipList, genOrder ,getInfo ,loadVipinfo} from '@/api/user/user.js';
import moment from '@/util/moment/moment.js';
import { EventBus } from "@/util/event-bus.js";

export default {
	data() {
		return {
			vipListIndex: {
				index: 0,
				vipId: ''
			},
			setting: {
				header: {
					top: 0,
					height: 0,
					allHeight: 0
				},
				isHomePage: true
			},
			vipIconList: [
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/vip_tag_1.png',
					label: '尊享标识'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/vip_tag_2.png',
					label: '免费畅聊'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/vip_tag_3.png',
					label: '会员折扣'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/vip_tag_4.png',
					label: '优先推荐权'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/vip_tag_5.png',
					label: '解锁敏感信息'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/vip_tag_6.png',
					label: '免费推荐用户'
				}
			],
			zzIconList:[
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/zz_tag_1.png',
					label1: '情感梳理规划',
					label2: '价值980元',
					label3: '专业情感指导，远离渣男骗女，帮您省钱省事更省心。'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/zz_tag_2.png',
					label1: '信息保密更靠谱',
					label2: '价值980元',
					label3: '不泄漏信息，做好婚前财产规划，求婚结婚规划和彩礼议价沟通。'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/zz_tag_3.png',
					label1: '开放隐藏会员',
					label2: '价值2980元',
					label3: '名校海龟、高颜值、高净值会员库为您优先匹配。'
				},
				{
					image: 'https://static.kuaimayoupin.com/000000_kt_xcx/vip/zz_tag_4.png',
					label1: '省心安全约见',
					label2: '价值1980元',
					label3: '“天上无云不下雨，地上无媒不成婚”，帮您美言提升个人魅力，脱单更高效！'
				}
			],
			vipList: [],
			userInfo: {},
			vipInfo:{}
		};
	},
	created() {
		const header = uni.getMenuButtonBoundingClientRect();
		this.setting.header.top = header.top;
		this.setting.header.height = header.height;
		this.setting.header.allHeight = header.top + header.height + 6;
		this.init()
		this.getVipList();
	},
	methods: {
		init(){
			uni.getStorage({
				key: 'userInfo',
				success: res => {
					this.userInfo = Object.assign({}, res.data);
				}
			});
			uni.getStorage({
				key: 'vipInfo',
				success: res => {
					this.vipInfo = Object.assign({}, res.data);
					console.log('-=-=');
					console.log(this.vipInfo)
				}
			});
		},
		selectVip(index) {
			this.vipListIndex.index = index;
			this.vipListIndex.vipId = this.vipList[index]._id;
		},
		genOrder() {
			const VIPID = {
				vip_id: this.vipListIndex.vipId,
				trade_type:"miniapp"
			};
			genOrder(VIPID).then(res => {
				const payInfo = res.data;
				console.log(payInfo)
				const _this = this
				uni.requestPayment({
					...payInfo,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '支付成功'
						});
						getInfo().then(response => {
							uni.setStorageSync('userInfo', response.data);
							_this.userInfo = Object.assign({}, _this.userInfo, response.data);
							EventBus.$emit("vipPaySuccess", true);
						})
					},
					fail: res => {
						uni.showToast({
							icon: 'none',
							title: '取消支付'
						});
					}
				});
			});
		},
		toMine() {
			uni.navigateBack({
				delta: 1
			});
		},
		getVipList() {
			getVipList({from:"miniapp"}).then(res => {
				res.data.forEach(item => {
					item.duration = moment
						.duration(item.duration)
						.locale('zh-cn')
						.humanize();
				});
				this.vipList = res.data;
				this.vipListIndex.vipId = res.data[0]._id;
			});
		}
	}
};
</script>

<style scoped lang="scss">

.card-position {
	width: 100%;
	position: relative;
	z-index: 5;
	.card-position-bg{
		position: absolute;
		width: 100%;
		height: 1800upx;
		background: #fff;
		z-index: -1;
		left: 0;
		right: 0;
		margin: auto;
		top: 200upx;
	}
}
.mall-container {
	// padding-bottom: 188upx;
	background: #332c2f;
}
.mine-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3;
	.mine-return-img {
		display: block;
		width: 24px;
		height: 24px;
	}
}
.mine-card {
	padding-bottom: 60upx;
	.inner {
		display: flex;
		justify-content: flex-start;
	}
}
.vip-feature-box{
	.vip-title{
		line-height:42upx;
		font-size: 32upx;
		margin-bottom:20upx;
		text-align: center;
		color: #333;
	}
	.vip-feature{
		display: flex;
		flex-direction: column;
		.vip-zz-cell{
			display: flex;
			.image-view{
				image{
					width: 92rpx;
					height: 92rpx;
					margin-right: 30rpx;
				}
			}
			
			.right-view{
				display: flex;
				flex-direction: column;
				
				.top-view{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}
				
				.lable-1{
					font-size: 26rpx;
					color: #333;
				}
				.lable-2{
					font-size: 26rpx;
					background: linear-gradient(180deg, #9E6E32 2.06%, #4F3002 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
				}
				.lable-3{
					font-size: 26rpx;
					color: #666;
				}
				
				.cell-line{
					margin: 45rpx 0;
					border: 0.5px solid #F8D489;
				}
			}
		}
	}	
}
.mine-card-left {
	margin-right: 40upx;
}
.mine-info .mine-name {
	font-size: 36upx;
	color: #fff;
	margin-right: 20upx;
}
.tag-box .mine-tag {
	border-radius: 20px;
	padding: 10upx 20upx;
}
.mine-head-box {
	width: 120upx;
	height: 120upx;
	border: 1px solid #fff;
	border-radius: 50%;
	overflow: hidden;
	.mine-head {
		display: block;
		width: 100%;
		height: 100%;
	}
}
.mine-card-right .mine-info {
	display: flex;
	justify-content: flex-start;
	height: 80upx;
	align-items: center;
}
.vip-tag {
	background: linear-gradient(159deg, rgba(232, 214, 193, 1) 0%, rgba(201, 166, 91, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: rgba(255, 170, 55, 1);
	font-size: 24upx;
	border: 1px solid rgba(255, 170, 55, 1);
}
.white-card {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
	border-radius: 12px;
	padding: 20upx;
}
.vip-page-card {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
	overflow: auto;
	margin-bottom: 40upx;
	.vip-page-card-top {
		display: flex;
		justify-content: space-between;
	}
	.set-meal {

		.capital {
			width: 192upx;
			height: 280upx;
			box-sizing: border-box;
			text-align: center;
			padding-top: 90rpx;
			padding-left: 10rpx;
			margin-left: 10rpx;
			box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
			border: 1px solid #D8D8D8;
			border-radius:12rpx;
			position: relative;

			.capital-money {
				display: flex;
				justify-content: center;
				align-items: baseline;
				font-size: 52rpx;
				width: 100%;
				background: linear-gradient(180deg, rgba(199, 165, 123, 1) 0%, rgba(104, 56, 7, 1) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				text {
					font-size: 32upx;
					font-weight: 500;
					color: rgba(131, 137, 160, 1);
					line-height: 18px;
				}
			}
			.set-meal-time {
				font-size: 28upx;
				color: #999;
			}
			
			.set-meal-note {
				font-size: 30upx;
				color: #774919;
			}
			
			.set-meal-money {
				position: absolute;
				top: 20rpx;
				left:-14rpx;
				text-align: start;
				line-height: 48upx;
				
				image{
					width: 180rpx;
					position: absolute;
					top: 0rpx;
					left: 0rpx;
				}
				
				text{
					margin-left: 25rpx;
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 160rpx;
					color:#FFF;
					// color:#000;
					
				}
			}
		}
		.capital.active {
			box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
			border: 1px solid #F4D9A7;
		}
		
	}
}
.Immediately-opened {
	background: linear-gradient(167deg, rgba(246, 216, 147, 1) 0%, rgba(248, 187, 77, 1) 100%);
	border-radius: 2px;
	width: 100%;
	line-height: 80upx;
	text-align: center;
	color: #6d3b0f;
}
.vip-box {
	padding-top: 60upx;
	.vip-title {
		margin: 0 0 40upx;
		image {
			display: block;
			width: 292upx;
			height: 74upx;
			margin: auto;
		}
	}
}
.vip-ul {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.vip-li {
		width: 33%;
		text-align: center;
		margin-bottom: 40upx;
		font-size: 28upx;
		color: rgba(71, 74, 88, 1);
		line-height: 36upx;
		image {
			display: block;
			width: 92upx;
			height: 92upx;
			margin: auto;
		}
		text {
			display: block;
			line-height: 50upx;
		}
		.vip-li-tag {
			font-size: 22upx;
			background: linear-gradient(169deg, rgba(199, 165, 123, 1) 0%, rgba(104, 56, 7, 1) 100%);
			-webkit-background-clip: text;
			color: transparent;
			line-height: 40upx;
		}
	}
}
</style>
